<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" :label-width="200" ref="form" :rules="rules">
        <p class="font-red">(注意:按商品送豆了，同一个条码不会再按尺寸送豆了)</p>
        <FormItem label="选择商品" prop="productSkuId">
          <Select 
            clearable
            v-model="form.productSkuId"
            filterable
            remote
            :remote-method="remoteMethod"
            @on-clear="clear"
            placeholder="请输入商品名称" 
            label-in-value
            :loading="selectLoading"
            @on-change="onSelectChange"
            >
            <Option v-for="(item, index) in goodArr" :key="index" :value="item.productSkuId">{{item.productTitle}}</Option>
          </Select>
        </FormItem>
        <FormItem label="生效">
          <Checkbox v-model="form.isMatch"></Checkbox>
          <span>(不勾选时仅不需要判断订单商品数量)</span>
        </FormItem>
        <FormItem label="匹配的订单商品总数量大于等于">
          <InputNumber :max="999999" :min="1" v-model="form.productNum"></InputNumber>
          <span>条</span>
        </FormItem>
        <FormItem label="送云豆">
          <InputNumber :max="999999" :min="1" v-model="form.goldNum"></InputNumber>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">保存</Button>
    </div>
    <Modal
        v-model="modal1"
        title="添加经销商"
        @on-ok="ok()"
        @on-cancel="cancel">
          <Select v-model="model1" label-in-value>
            <Option v-for="item in distributor" :value="item" :key="item.id">{{ item.name }}</Option>
        </Select>
    </Modal>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      oTimer: null,
      modal1: false,
      model1: '',
      distributor: [],
      goodArr: [],
      modal: false,
      isFirst: true,
      title: '扫码入库送云豆',
      btnDisabled: false,
      rules: {
        productSkuId: [
          { required: true, message: '请选择商品', trigger: 'change'}
        ]
      },
      form: {
        productSkuId: '',
        productTitle: '',
        goldNum: 1,
        productNum: 1,
        isMatch: true
      },
      status: 'pass',
      id: '',
      selectLoading: false,
      keyword: '',
      productSkuId: '',
      productTitle: ''
    }
  },
  methods: {
    async getTireData (query = '') {
      let param = {
        keyword: query,
        isShelf: true
      }
      this.selectLoading = true
      await this.$jsonPost('/product/business/page_product_info_and_tags', param).then(data => {
        this.selectLoading = false
        this.goodArr = (data.records || []).map(item => {
          return {
            productSkuId: item.productSkuDTO ? item.productSkuDTO.id : null,
            productTitle: item.productInfoDTO ? item.productInfoDTO.title : ''
          }
        })
      })
    },
    remoteMethod (query = '') {
      if (!this.isFirst) { // 第一次进来不进行远程搜索
        this.oTimer && clearTimeout(this.oTimer)
        this.oTimer = setTimeout(() => {
          this.getTireData(query)
        }, 500)
      }
    },
    clear() {
      this.remoteMethod()
    },
    onSelectChange (e) {
      if (e) {
        this.form.productSkuId = e.value
        this.form.productTitle = e.label
      } else {
        this.form.productSkuId = null
        this.form.productTitle = ''
      }
    },
    openForm(item) {
      this.$refs.form.resetFields()
      this.id = ''
      if (item) {
        this.isFirst = true
        this.id = item.id
        this.form = {
          productSkuId: item.productSkuId,
          productTitle: item.productTitle,
          goldNum: item.goldNum,
          productNum: item.productNum,
          isMatch: item.isMatch
        }
        this.getTireData(this.form.productTitle).then(() => {
          this.form.productSkuId = item.productSkuId
          this.isFirst = false
        })
      } else {
        this.isFirst = false
        this.form = {
          productSkuId: '',
          productTitle: '',
          goldNum: 1,
          productNum: 1,
          isMatch: true
        }
      }
      this.btnDisabled = false
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onAddDis(index) {
      this.currentIndex = index // 当前是哪个规则
      this.modal1 = true
    },
    ok () {
      if (!Object.keys(this.model1).length) {
        this.$Notice.warning({
          title: '请选择要添加的经销商'
        })
        return
      }
      if (!this.form.distributorGoldRuleDTOList[this.currentIndex].distributorIdSet) {
        this.form.distributorGoldRuleDTOList[this.currentIndex].distributorIdSet = []
      }
      this.form.distributorGoldRuleDTOList[this.currentIndex].distributorIdSet.push({
        name: this.model1.name,
        id: this.model1.id
      })
    },
    onDelete (index, i) {
      this.form.distributorGoldRuleDTOList[index].distributorIdSet.splice(i, 1)
    },
    onAddRule () {
      this.form.distributorGoldRuleDTOList.push({
        distributorIdSet: [],
        goldNum: 1,
        groups: null
      })
    },
    onDelRule (index) {
      this.form.distributorGoldRuleDTOList.splice(index, 1)
    },
    onSave() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.btnDisabled) return
          let text = this.id ? '编辑' : '新增'
          let url = this.id ? `/gold/rule/edit_product` : '/gold/rule/save_product'
          let param = {
            productTypeEnum: 'PRODUCT',
            goldNum: this.form.goldNum,
            isMatch: this.form.isMatch,
            productNum: this.form.productNum,
            productSkuId: this.form.productSkuId,
            productTitle: this.form.productTitle
          }
          if (this.id) {
            param.id = this.id
          }
          this.status = 'loading'
          this.$jsonPost(url, param).then(data => {
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$emit('goods')
            this.closeModal()
            this.status = 'pass'
            this.disabled = false
          }).catch(() => {
            this.status = 'pass'
            this.disabled = false
          })
        } else {
          this.disabled = false
        }
      })
    }
  }
}
</script>